<template>
    <div class="popUp">
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <div>
                <table>
                    <tr>
                        <td>条目编号</td>
                        <td>
                            <el-input v-model="queryParam.entryCode" size="mini"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>风险说明</td>
                        <td>
                            <el-input v-model="queryParam.entryName" size="mini"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>风险类型</td>
                        <td>
                            <el-select v-model="queryParam.entryName" size="mini">
                                <option v-for="(item, index) in entryTypesList" :key="index">{{item}}</option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleBtn('cancel')">取 消</el-button>
                <el-button @click="handleBtn('reset')">重 置</el-button>
                <el-button type="primary" @click="handleBtn('confirm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator';
@Component({
    name: 'QueryPopup',
    components: {
    },
})
export default class QueryPopup extends Vue {
    @Prop() queryPopupVisible;
    @Prop() currentNode;
    title:string = '';
    private dialogVisible:boolean = false;
    queryParam = { // 查询条件
        entryCode: '',
        entryName: '',
        entryTypes: ''
    }
    entryTypesList = []; // 风险类型option
    @Watch('queryPopupVisible')
    watchqueryPopup(val) {
        if (val == true) {
            this.dialogVisible = val;
            if (this.currentNode.id == '1') {
                this.title = '查询白名单条目';
            } else if (this.currentNode.id == '2') {
                this.title = '查询黑名单条目'
            }
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.dialogVisible = val;
            this.$emit('emitQueryPopupVisible', false)
        }
    }
    handleBtn(param) {
        if (param == 'cancel') {
            this.dialogVisible = false;
        } else if (param == 'confirm') {
        } else if (param == 'reset') {
            this.queryParam = { // 查询条件
                entryCode: '',
                entryName: '',
                entryTypes: ''
            }
        }
    }
}
</script>
<style lang="scss" scoped>
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),
        td:nth-child(3) {
            text-align: right;
            width: 60px !important;
        }
    }
}
</style>
